<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head th:replace="admin/_fragments :: head(~{ :: title})">
		<meta charset="utf-8" />
		<!-- 移动端的浏览 -->
		<meta name="viewport" content="device-width,initial-scale=1.0">
		<title>博客管理登录</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
		<link rel="stylesheet" href="../../static/css/me.css"/>
	</head>
	<body>


		<div class="m-container-small m-padd-tb-massive" style="max-width: 30em !important;">

			<div class="column">
				<h2 class="ui teal image header">
<!--					<img src="assets/images/logo.png" class="image">-->
					<div class="content">
						管理后台登录
					</div>
				</h2>
				<form class="ui large form" method="post" action="#" th:action="@{/admin/login}">
					<div class="ui stacked segment">
						<div class="field">
							<div class="ui left icon input">
								<i class="user icon"></i>
								<input type="text" name="username" placeholder="用户名">
							</div>
						</div>
						<div class="field">
							<div class="ui left icon input">
								<i class="lock icon"></i>
								<input type="password" name="password" placeholder="密码">
							</div>
						</div>
						<button class="ui fluid large teal submit button">登  录</button>
					</div>

					<div class="ui error  mini message"></div>
					<div class="ui mini negative message" th:unless="${#strings.isEmpty(message)}" th:text="${message}">用户名和密码错误</div>
				</form>


			</div>
		</div>









		<th:block th:replace="admin/_fragments :: script">
			<script src="../js/jquery-3.6.0.min.js"></script>
			<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
			<script src="../lib/editormd/editormd.min.js"></script>
		</th:block>



		<script>
			// 表单验证
			$(".ui.form").form({
				fields: {
					username:{
						identifier:"username",
						rules:[{
							type:"empty",
							prompt:"请输入用户名"
						}]
					},
					password:{
						identifier:"password",
						rules:[{
							type:"empty",
							prompt:"请输入密码"
						}]
					}
				}
			});

		</script>


	</body>
</html>
